Ext.define('App.reportconfiguration.chartconfiguration.field.AxisGridField', {
    extend: 'Extend.form.field.GridField',
    alias: ['widget.AxisGridField'],
    controller: 'AxisGridFieldController',
    border: false,
    roweditable: true,
    sortableColumns: false,
    submitFields: ['id', 'type', 'position', 'fields', 'title', 'percent', {column: 'index', field: 'idx'}],
    columns: [{
        text: 'ID',
        dataIndex: 'id',
        hidden: true,
        sortable: false
    }, {
        text: '类型',
        dataIndex: 'type',
        flex: 1,
        editor: {
            xtype: 'AxisTypeComboBox',
            allowBlank: false,
            listeners: {
                change: 'onAxisTypeComboBox'
            }
        }
    }, {
        text: '位置',
        dataIndex: 'position',
        flex: 1,
        renderer: function (v, m, r) {
            if (v == 'bottom') {
                return '底部';
            } else if (v == 'left') {
                return '左侧';
            } else if (v == 'right') {
                return '右侧';
            } else {
                return;
            }
        },
        editor: {
            xtype: 'AxisPositionComboBox',
            allowBlank: false
        }
    }, {
        text: '标题',
        dataIndex: 'title',
        flex: 3,
        editor: {
            allowBlank: false
        }
    }, {
        text: '数据字段',
        dataIndex: 'fields',
        flex: 3,
        editor: {}
    }, {
        text: '百分比',
        flex: 1,
        dataIndex: 'percent',
        renderer: function (v, m, r) {
            if (v == true) {
                return '是';
            } else {
                return '否';
            }
        },
        editor: {
            xtype: 'booleancombobox',
            disabled: true,
            itemId: 'percent'
        }
    }],
    listeners: {
        startedit: 'onStartEdit'
    }
})


Ext.define('App.reportconfiguration.chartconfiguration.view.AxisGridFieldController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.AxisGridFieldController',
    onStartEdit: function (rowedit, e, eOpts) {
        var me = this;
        var axisPositionComboBox = rowedit.editor.down('AxisPositionComboBox');
        axisPositionComboBox.record = e.record;
        var type = e.record.get('type');
        if (!Ext.isEmpty(type)) {
            var percentCombobox = rowedit.editor.down('booleancombobox[itemId="percent"]')
            if (Ext.String.startsWith(type, 'category') || Ext.String.startsWith(type, 'time')) {
                axisPositionComboBox.getStore().setData([{name: '底部', value: 'bottom'}]);
                percentCombobox.disable();
                percentCombobox.setValue(false);
            } else {
                axisPositionComboBox.getStore().setData([
                    {name: '左侧', value: 'left'},
                    {name: '右侧', value: 'right'}
                ]);
                percentCombobox.enable();
            }
            me.createFieldCombobox(type);
        } else {
            var columns = rowedit.grid.columns;
            columns[4].setEditor(Ext.create({xtype: 'combobox', disabled: true}));
        }
        var isStereoscopic = me.getView().up('ChartConfigurationEditor').down('checkbox[name="stereoscopic"]').getValue();
        if (isStereoscopic == true) {
            rowedit.editor.down('AxisTypeComboBox').getStore().setData([
                {value: 'category3d', name: "Category3d"},
                {value: 'numeric3d', name: "Numeric3D"},
                {value: 'time3d', name: "Time3D"}]);
        } else {
            rowedit.editor.down('AxisTypeComboBox').getStore().setData([
                {value: 'category', name: "Category"},
                {value: 'numeric', name: "Numeric"},
                {value: 'time', name: "Time"},
                {value: 'category3d', name: "Category3d"},
                {value: 'numeric3d', name: "Numeric3D"},
                {value: 'time3d', name: "Time3D"}]);
        }

    },
    onAxisTypeComboBox: function (combo, newValue, oldValue, eOpts) {
        var me = this;
        if (Ext.isEmpty(newValue) && Ext.isEmpty(oldValue)) {
            return;
        }
        var AxisPositionComboBox = combo.up().down('AxisPositionComboBox');
        var percentCombobox = combo.up().down('booleancombobox[itemId="percent"]')
        if (Ext.String.startsWith(newValue, "category") || Ext.String.startsWith(newValue, "time")) {
            AxisPositionComboBox.getStore().setData([{name: '底部', value: 'bottom'}]);
            AxisPositionComboBox.setValue('bottom');
            percentCombobox.disable(true);
            percentCombobox.setValue(false);
        } else {
            AxisPositionComboBox.getStore().setData([
                {name: '左侧', value: 'left'},
                {name: '右侧', value: 'right'}
            ]);
            AxisPositionComboBox.setValue();
            percentCombobox.disable(false);
        }
        me.createFieldCombobox(newValue);
    },
    createFieldCombobox: function (type) {
        var me = this.getView();
        var rowedit = me.findPlugin('extendrowediting');
        var form = me.up('ChartConfigurationEditor');
        var columns = rowedit.grid.columns;
        var pie = form.down('checkbox[name="pie"]').getValue();

        var kpiConfigurations = [];
        form.kpisStore.each(function (item) {
            var kpiConfiguration = item.get('kpiConfiguration');
            if (Ext.String.startsWith(type, 'category')) {
                if (kpiConfiguration.dataType == 'string') {
                    kpiConfigurations.push(kpiConfiguration);
                }
            } else if (Ext.String.startsWith(type, 'time')) {
                if (kpiConfiguration.dataType == 'date') {
                    kpiConfigurations.push(kpiConfiguration);
                }
            } else {
                if (kpiConfiguration.dataType != 'string' && kpiConfiguration.dataType != 'date') {
                    kpiConfigurations.push(kpiConfiguration);
                }
            }
        })

        var editor = columns[4].getEditor();
        var width = null;
        var value = editor.getValue();
        try {
            width = editor.getWidth();
        } catch (e) {
            width = columns[4].getWidth();
        }
        if (!Ext.isEmpty(editor)) {
            columns[4].setEditor();
            editor = null;
        }
        if (!Ext.String.startsWith(type, 'category') && !Ext.String.startsWith(type, 'time') && pie != true) {
            editor = Ext.create({
                xtype: 'CheckCombo',
                itemId: 'fields',
                width: width,
                allowBlank: false,
                valuesToString: true,
                valueField: 'field',
                displayField: 'field',
                editable: false,
                queryMode: 'local',
                store: {data: kpiConfigurations},
                value: value
            });
        } else {
            editor = Ext.create({
                xtype: 'combobox',
                itemId: 'fields',
                width: width,
                allowBlank: false,
                valueField: 'field',
                displayField: 'field',
                editable: false,
                queryMode: 'local',
                store: {data: kpiConfigurations},
                value: value
            });
        }
        columns[4].setEditor(editor);
    }
})